<template>
  <div class="active">
    <el-button class="add" type="primary" style="float:left;margin:12px;" @click="creat">添加一条</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" align="center" label="序号"></el-table-column>
      <el-table-column prop="active" align="center" label="服务名称"></el-table-column>
      <el-table-column prop="price" align="center" label="服务价格"></el-table-column>
      <el-table-column prop="num" align="center" label="购买次数"></el-table-column>
      <el-table-column label="操作" width="220" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="updata(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delate">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改一条 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="服务名称:">
          <el-input v-model="active" />
        </el-form-item>
        <el-form-item label="服务价格:">
          <el-input v-model="price" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">新增</el-button>
      </div>
    </el-dialog>
    <!-- 确认删除 -->
    <el-dialog :visible.sync="deleteDataFrom" width="30%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <span>确定删除这一条吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDataFrom = false">取消</el-button>
        <el-button type="primary" @click="deleteDataFrom = false">确定删除</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {},
      temp:{},
      deleteDataFrom: false,
      dialogFormVisible: false,
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, // 页数
      total: 10,
      active: "",
      price: "",
      tableData: [
        {
          id: "1",
          active: "名医门诊绿通",
          price: "2000",
          num: "213"
        },
        {
          id: "2",
          active: "大咖门诊绿通",
          price: "1800",
          num: "250"
        },
        {
          id: "3",
          active: "专家绿通看诊",
          price: "1500",
          num: "260"
        },
        {
          id: "4",
          active: "CT平扫绿通",
          price: "1200",
          num: "568"
        },
        {
          id: "5",
          active: "MR平扫绿通",
          price: "1200",
          num: "522"
        },
        {
          id: "6",
          active: "无痛胃镜/肠镜",
          price: "1000",
          num: "803"
        },
        {
          id: "7",
          active: "无痛胃镜+肠镜",
          price: "1200",
          num: "756"
        },
        {
          id: "8",
          active: "超导睡眠图(PSG)",
          price: "1400",
          num: "206"
        },
        {
          id: "9",
          active: "便携睡眠呼吸监测",
          price: "800",
          num: "467"
        },
        {
          id: "10",
          active: "普通B超",
          price: "600",
          num: "1267"
        }
      ]
    };
  },
  methods: {
    //当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize;
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    creat() {
      this.active = "";
      this.price = "";
      this.dialogFormVisible = true;
    },
    updata(row) {
      this.active = row.active;
      this.price = row.price;
      this.dialogFormVisible = true;
    },
    delate() {
      this.deleteDataFrom = true;
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.active {
  margin-top: 55px;
}
</style>